<template>
  <div class="Navigation">
    <ul>
      <li>首页</li>
      <li @click="toScroll(855)">软件</li>
      <li @click="toScroll(1800)">服务</li>
      <li @click="toScroll(2416)">我们</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      
    }
  },
  methods: {
    toScroll(e){
       this.$parent.toScroll(e);
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../assets/css/index.scss';
  .Navigation{
    background: $navbg;
    box-shadow: $shadow;
    ul{
      padding: 0;
      padding-left: 50px;
      margin: 0;
      list-style: none;
      display: flex;
      font-size:14px;
      li{
        border: 4px solid $navbg;
        // border-left: 4px solid $navbg;
        // border-right: 4px solid $navbg;
        transition: all .6s;
        padding: 10px 20px;
        &:hover{
          background: $bg;
          cursor: pointer;
          color: $txt;
        }
      }
    }
  }
</style>
